<template>
  <a-table :columns="columns" :data="tableData" :pagination="false" stripe>
    <template #index="{ rowIndex }">
      {{ rowIndex + 1 }}
    </template>
    <template #type="{ record }">
      {{
        record.type === 1
          ? '重点工作'
          : record.type === 2
          ? '例行工作'
          : '新增工作'
      }}
    </template>
    <template #indexWeight="{ record }"> {{ record.indexWeight }}% </template>
    <template #optional="{ record, rowIndex }">
      <a-tooltip content="编辑">
        <IconFont
          type="icon-edit"
          :size="26"
          :style="{
            marginRight: '10px',
            cursor: 'pointer'
          }"
          @click="goEdit(record, rowIndex)"
        />
      </a-tooltip>
      <a-tooltip content="删除" position="left">
        <a-popconfirm content="是否确认删除该条数据?" @ok="del(rowIndex)">
          <icon-font
            type="icon-delete"
            :size="26"
            :style="{
              cursor: 'pointer',
              marginRight: '10px'
            }"
          />
        </a-popconfirm>
      </a-tooltip>
    </template>
  </a-table>
  <a-button v-if="!props.review" type="text" @click="add">新增指标</a-button>
  <IndexDrawer
    v-model:visible="drawerVisible"
    @submit="submit"
    :data="currData"
    @exist="exist"
  />
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceKeyPerformanceIndexLibraryUse } from '@/apis/management/performance/baseSetting/template/type';
import { useVModel } from '@vueuse/core';
import IndexDrawer from './IndexDrawer.vue';

const props = withDefaults(
  defineProps<{
    data?: PerformanceKeyPerformanceIndexLibraryUse[];
    review?: boolean;
  }>(),
  {
    review: false,
    data: () => []
  }
);
const emit = defineEmits(['update:visible', 'handleOk', 'update:data']);
const handleOk = () => {
  emit('handleOk');
};
const change = () => {
  emit('update:data', tableData.value);
};
const tableData = useVModel(props, 'data', emit);
const columns = ref<any>([
  {
    title: '序号',
    dataIndex: '',
    slotName: 'index',
    width: 80,
    align: 'center'
  },
  {
    title: '工作计划项目',
    dataIndex: 'name',
    slotName: 'name',
    width: 200,
    align: 'center'
  },
  {
    title: '工作类型',
    dataIndex: 'type',
    slotName: 'type',
    width: 200,
    align: 'center'
  },
  {
    title: '工作项目界定/描述',
    dataIndex: 'define',
    slotName: 'define',
    width: 200,
    align: 'center'
  },
  {
    title: '完成目标及实现要求',
    dataIndex: 'definition',
    slotName: 'definition',
    width: 200,
    align: 'center'
  },
  {
    title: '评分标准',
    dataIndex: 'rule',
    slotName: 'rule',
    width: 200,
    align: 'center'
  },
  {
    title: '指标权重',
    dataIndex: 'indexWeight',
    slotName: 'indexWeight',
    width: 200,
    align: 'center'
  }
]);
onMounted(() => {
  if (!props.review) {
    columns.value.push({
      title: '操作',
      dataIndex: 'optional',
      slotName: 'optional',
      width: 120,
      fixed: 'right',
      align: 'center'
    });
  }
});
interface OldData {
  oldName?: string;
}
const currData = ref<PerformanceKeyPerformanceIndexLibraryUse & OldData>({});
const drawerVisible = ref(false);
const editIndex = ref(-1); //编辑项的下标，用以判断新增和编辑，下标小于0是新增数据。大于等于0则是修改此下标的值
const add = () => {
  editIndex.value = -1;
  currData.value = {};
  drawerVisible.value = true;
};
const del = (index: number) => {
  if (!props.data?.length) return;
  tableData.value.splice(index, 1);
  change();
};
const goEdit = (
  data: PerformanceKeyPerformanceIndexLibraryUse,
  index: number
) => {
  editIndex.value = index;
  currData.value = cloneDeep(data);
  currData.value.oldName = data.name;
  drawerVisible.value = true;
}; // 检查是否已存在于待新增的数据
const exist = (
  data: PerformanceKeyPerformanceIndexLibraryUse,
  callback: any
) => {
  const index = tableData.value.findIndex((item) => item.name === data.name);
  if (index >= 0) {
    callback(true);
    return;
  }
};
const submit = (data: PerformanceKeyPerformanceIndexLibraryUse) => {
  //判断是新增还是编辑
  if (editIndex.value < 0) {
    //新增
    tableData.value?.push(data);
    add();
  } else {
    //编辑
    if (!tableData.value?.length) return;

    tableData.value[editIndex.value] = data;
  }
  change();
};
</script>

<style lang="less" scoped>
//
</style>
